
<!-- 小屋信息统计表 -->
<div class="container" style="margin-top: 10px">
    <div class="row">
        <div class="class col-md-3" style="padding: 5px 10px 0px 0px;">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="class col-md-8" >
                        <div>
                            <h3>{$healthroomNumber}<br>
                                <small>已建立小屋数量</small>

                            </h3>  
                        </div>
                    </div>
                    <div class="class col-md-4" style="padding: 20px;text-align:center;background-color: #f36a5a;">
                        <span class="glyphicon glyphicon-home" style="font-size: 40px;color: #fff;"></span>   
                    </div>
                </div>       
            </div>
        </div>
        <div class="class col-md-3" style="padding: 5px 10px 0px 10px;">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="class col-md-8" >
                        <div>
                            <h3>{$expertNumber}<br>
                                <small>小屋专家数量</small>

                            </h3>  
                        </div>
                    </div>
                    <div class="class col-md-4" style="padding: 20px;text-align:center;background-color: #30a5ff;">
                        <span class="glyphicon glyphicon-user" style="font-size: 40px;color: #fff;"></span>   
                    </div>
                </div>       
            </div>
        </div>
        <div class="class col-md-3" style="padding: 5px 10px 0px 10px;">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="class col-md-8" >
                        <div>
                            <h3>{$hospitalNumber}<br>
                                <small>拥有隶属小屋医院</small>

                            </h3>  
                        </div>
                    </div>
                    <div class="class col-md-4" style="padding: 20px;text-align:center;background-color: #1abc9c;">
                        <span class="glyphicon glyphicon-star" style="font-size: 40px;color: #fff;"></span>   
                    </div>
                </div>       
            </div>
        </div>
        <div class="class col-md-3" style="padding: 5px 0px 0px 10px;">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="class col-md-8" >
                        <div>
                            <h3>{$personNumber}<br>
                                <small>小屋接待病患数量</small>

                            </h3>  
                        </div>
                    </div>
                    <div class="class col-md-4" style="padding: 20px;text-align:center;background-color: #fabe28;">
                        <span class="glyphicon glyphicon-home" style="font-size: 40px;color: #fff;"></span>   
                    </div>
                </div>       
            </div>
        </div>        
    </div>
</div>


<!-- 小屋增长率折线图 -->
<div class="container">
    <div class="row">
        <div class="col-md-6" style="padding-left: 0px;">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">邯郸市健康小屋增长率</h3>
                </div>
                <div class="panel-body">
                  <div id="increase01" style="height:600px;">
                  </div>
              </div>
          </div>
      </div>

      <div class="col-md-6" style="padding-right: 0px;">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">各县区健康小屋数量</h3>
            </div>
            <div class="panel-body">
              <div id="radar01" style="height:600px;">
              </div>
          </div>
      </div>
  </div>
</div>
</div>


<!-- 健康小屋数量柱状图 -->
<div class="container" style="margin-top: 10px">
  <div class="row">
    <div id="bar01" class="col-md-12 wrapper" style="height:600px">

    </div>
</div>

</div>


<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('increase01'));

        // 指定图表的配置项和数据
       option = {
       xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [{volist name="ilist" id="vo"}"{$vo.start_time}"{if condition="$i neq count($clist)"},{/if}{/volist}]
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [{volist name="ilist" id="vo1"}{$vo1.rmcount}{if condition="$i neq count($clist)"},{/if} {/volist}],
        type: 'line',
        areaStyle: {}
    }]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>


<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('bar01'));

        // 指定图表的配置项和数据
        var option = {
          backgroundColor: '#fff',

          title: {
            text: '邯郸市各区县小屋数量对照图',
            textStyle:{
                color:'#808080',
                fontSize:18,
            },
            left:'center'
        },
        tooltip: {},
        legend: {
            data:['区县名称']
        },
        xAxis: {
            data: [{volist name="clist" id="vo"}"{$vo.name}"{if condition="$i neq count($clist)"},{/if}{/volist}],
             axisLabel: {
            interval: 0,
            rotate: 40
        },
        },
        yAxis: {},
        series: [{
            name: '健康小屋数量',
            type: 'bar',
            data: [{volist name="clist" id="vo1"}{$vo1.rmcount}{if condition="$i neq count($clist)"},{/if} {/volist}]
        }]
    };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>


    <script>
      var myChart = echarts.init(document.getElementById('radar01'));
      option = {
         backgroundColor: '#fff',
         title: {
            text: '各区县服务水平对照图',
            subtext:'',
            textStyle:{
                color:'#808080',
                fontSize:18,
            },
            top: 10,
            left:'center'
        },
        tooltip: {
            trigger: 'item',
            backgroundColor : 'rgba(0,0,250,0.2)'
        },
        legend: {
            type: 'scroll',
            bottom: 10,
            data: (function (){
                var list = [];
                {volist name='slist' id='vo'}
                list.push('{$vo.name}');
                {/volist}
                return list;
            })()
        },
        visualMap: {
            top: 'middle',
            right: 10,
            color: ['red', 'blue'],
            text:['最高','最低'],
            calculable: false
        },
        radar: {
           indicator : [
           { text: '服务态度', max: 5},
           { text: '服务能力', max: 5},
           { text: '服务效率', max: 5},
           { text: '服务质量', max: 5},
           { text: '服务纪律', max: 5}
           ]
       },
       series : (function (){
        var series = [];
        {volist name='slist' id='vo'}
        series.push({
            name:'区县服务水平对照表',
            type: 'radar',
            symbol: 'none',
            lineStyle: {
                width: 1
            },
            emphasis: {
                areaStyle: {
                    color: 'rgba(0,250,0,0.3)'
                }
            },
            data:[
            {
                value:[
                {$vo.attitude},
                {$vo.capacity},
                {$vo.quality},
                {$vo.efficiency},
                {$vo.discipline}
                ],
                name: '{$vo.name}'
            }
            ]
        });
        {/volist}
        return series;
    })()
};
myChart.setOption(option);
</script>


<script>
 var myChart = echarts.init(document.getElementById("map01"));
 myChart.showLoading();

 $.get('__STATIC__/images/130400.json', function (handanJson) {
    myChart.hideLoading();

    echarts.registerMap('邯郸市', handanJson, {

    });
    option = {
        backgroundColor: '#fff',

        tooltip: {
            trigger: 'item',
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function (params) {
                var value = (params.value + '').split('.');
                value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                return params.seriesName + '<br/>' + params.name + ': ' + value;
            }
        },
        visualMap: {
            left: 'right',
            min: 10,
            max: 100,
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            text:['最高','最低'],           // 文本，默认为数值文本
            calculable: true
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'left',
            top: 'top',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
        {
            name: '小屋数量',
            type: 'map',
            roam: true,
            map: '邯郸市',
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
                // 文本位置修正
                textFixed: {
                    Alaska: [20, -20]
                },
                data:[
                {name: '丛台区', value: 10},
                {name: '邯山区', value: 23},
                {name: '复兴区', value: 33},
                {name: '永年区', value: 23},
                {name: '肥乡区', value: 23},
                {name: '峰峰矿区', value:22},
                {name: '武安市', value: 48},
                {name: '涉县', value: 23},
                {name: '魏县', value: 20},
                {name: '广平县', value: 12},
                {name: '鸡泽县', value: 50},
                {name: '邱县', value: 100},
                {name: '馆陶县', value: 23},
                {name: '磁县', value: 48},
                {name: '曲周县', value: 82},
                {name: '临漳县', value: 22},
                {name: '成安县', value: 13},
                {name: '邯郸县', value: 33},

                ]
            }
            ]
        };

        myChart.setOption(option);
    });

</script>